<template>
	<view class="home">
		<view class="head_field">
			<image src="../../static/images/bg.jpg" class="bg_img"></image>
		</view>
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<view >
					<image :src="item.img" class="iconfont"></image>
				</view>
				<text>{{item.text}}</text>
			</view>
		</view>	
		<view class="home_tab">
			<view class="home_tab_title">
				<view class="title_inner">
					<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" 
					styleType="text" activeColor="#ff8e03"></uni-segmented-control>
				</view>
			</view>
			<view class="home_tab_content">
				<view v-if="current === 0">
					<home-food></home-food>
		        </view>
				<view v-if="current === 1">
				     <home-restaurant></home-restaurant>
				</view>
				<view v-if="current === 2">
				    <home-category></home-category>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import homeFood from '../home/home-food'
	import homeRestaurant from '../home/home-restaurant'
	import homeCategory from '../home/home-category'
	import { uniSegmentedControl } from "@dcloudio/uni-ui";
	export default {
		data() {
			return {
				items:[{title:"美食"},{title:"商家"},{title:"攻略"}],
				current:0,
				navs:[
					{
						img:"../../static/icons/lunch.png",
						text:"寻美食",
						path:"/pages/main/food-main/index"
					},
					{
						img:"../../static/icons/res.png",
						text:"寻店家",
						path:"/pages/main/restaurant-main/index"
					},
					{
						img:"../../static/icons/category.png",
						text:"寻攻略",
						path:"/pages/main/category-main/index"
					},
					{
						img:"../../static/icons/map.png",
						text:"美食地图",
						path:"/pages/main/map-main/map-main"
					}
				]
			}
		},
		methods: {
			onClickItem(e)
			{
				if(this.current!=e.currentIndex){
					this.current=e.currentIndex;
				}
			},
			navItemClick(url){
				uni.navigateTo({
					url
				})
				
			}
		},
		onLoad() {

		  
		},
		components:{
			homeFood,
			homeRestaurant,
			homeCategory,
			uniSegmentedControl
		}
	}
</script>

<style lang="less">
	.head_field{
		.bg_img{
		width:100%;
		z-index:1
	}
}
	
	.nav
	{
		display: flex;
	}
	.nav_item
	{
		width:33%;
		text-align: center;
		view{
			width:100rpx;
			height:100rpx;
			
			border-radius: 50%;
			margin:10px auto 0 auto;
			line-height: 100rpx;
			color:#fff;
			.iconfont{
				margin-top: 6px;
				margin-right:1px;
				width: 70rpx;
				height:70rpx;
			}
		}
		text{
			font-size:13px;
			
		}
	}
	.nav_item:nth-child(1){
		view{
				background-color: #F0AD4E;
		}
	}
	.nav_item:nth-child(2){
		view{
				background-color:#6A2C70;
		}
	}
	.nav_item:nth-child(3){
		view{
				background-color: #394989;
		}
	}
	.nav_item:nth-child(4){
		view{
				background-color:#ff9090;
		}
	}
	.home_tab
	{
		.home_tab_title{
			position: relative;
			.title_inner{
				margin:0 auto;
			}
		}
		.home_tab_content{
			
		}
	}
	
</style>
